<template>
  <header>
    <div
      class="search-return"
      @click="goback"
    >
      <i class="iconfont">&#xe8a4;</i>
    </div>
    <div class="search-main">
      <i class="iconfont">&#xe694;</i>
      <form
        action=""
        onsubmit="return false"
        @keyup.enter="goSearchList"
      >
        <!-- goSearchList和下面一样都是指向跳转 -->
        <!-- 禁止自动提交 -->
        <input
          type="search"
          autocomplete:="off"
          maxlength="15"
          placeholder="搜索你喜欢的产品...."
          v-model="searchValue"
        >
      </form>
    </div>
    <button
      class="search-btn"
      @click="goSearchList"
    >
      搜索
    </button>
  </header>

</template>

<script>
export default {
  data() {
    return {
      searchValue: this.$route.query.key || "",
      searchArr: [],
    };
  },
  /*     console.log(this.$route.query); */
  methods: {
    goback() {
      this.$router.back(); //返回上一页
    },
    goSearchList() {
      //如果搜索的的关键字是没有的，那么直接return
      if (!this.searchValue) {
        alert("您当前还没有输入内容");
        return;
      }
      if (!localStorage.getItem("searchList")) {
        localStorage.setItem("searchList", "[]"); /* 多余了 */
      } else {
        //之前有则获取
        this.searchArr = JSON.parse(localStorage.getItem("searchList"));
      } //如果有输入关键字，则把关键字放到本地存储中
      /* 比较要放下面，注意逻辑问题，因为即使？？ */
      if (this.searchValue === this.$route.query.key) {
        /* window.location.reload(); */
        //一共三种
        /* this.$router.go(0); //刷新页面 */
        return false; //重复提交则不跳转   //但是这里也有问题，比如你搜索了（1），再搜索（2）就不能执行了，他不会进入数据库查询了，要改逻辑
      }
      //增加数据
      this.searchArr.unshift(this.searchValue);
      //es6的去重
      let newArr = new Set(this.searchArr);
      //给本地存储赋值
      /* localStorage.getItem(  get set 不分 导致写入不到内容*/
      localStorage.setItem(
        "searchList",
        JSON.stringify(Array.from(newArr))
        /* JSON.stringify(this.searchArr) */
      );
      /* 通过path查找 */ /* 通过name查找 */
      /*  */
      this.$router.push({
        /* path: "/search/list", */
        name: "list",
        query: {
          key: this.searchValue,
        },
      });
    },
  },
  //用来监听一下
  /*   watch: {
    $route,
  }, */
};
</script>

<style scoped>
span div i {
  caret-color: transparent; /* 点击span的时候不显示光标 */
}
header {
  display: flex;
  justify-content: space-around; /* 三个内容左中右 */
  align-items: center; /* 垂直居中 */
  background-color: orange;
  color: aliceblue;
  width: 100vw;
  height: 60px;
}
.search-return i {
  font-size: 35px;
  font-weight: 900;
}
.search-main i {
  display: inline-block;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 1%;
  padding-right: 5%;
  font-size: 35px;
  font-weight: 500;
  color: rgb(233, 74, 12);
}
.search-main {
  padding: 1px 3%;
  display: flex;
  align-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
}
.search-main form input {
  width: 90%;
  height: 90%;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-main form input[type="search"]::-webkit-search-cancel-button {
  display: none; /* 去除删除叉叉 */
  -webkit-appearance: none;
}
.search-btn {
  padding-right: 15px;
  font-weight: 500;
  width: auto;
  font-size: 23px;
  border: none;
  outline: none;
  background-color: orange;
  color: black; /* 浅蓝色 */
  text-shadow: 0 0 25px rgb(133, 93, 93); /* 利用文字阴影 */
  font-family: "yjsz"; /* 这是重点！！！ */
  /*   font-family: electronicFont;   这个好玩 数字字体*/
  text-align: right;
}
</style>

